<template>
    <div class="loginContainer">
        <div class="loginForm">
            <div class="header">
                <div class="loginHeader">
                    <mt-header title="设置登录密码">
                        <router-link to="/" slot="left">
                            <mt-button icon="back"></mt-button>
                        </router-link>
                    </mt-header>
                </div>
                <div class="inputContainer">
                    <input type="password" placeholder="输入新密码" name="password1" v-model="password1">
                </div>
                <div class="inputContainer">
                    <input type="password" placeholder="确认新密码" name="password2" v-model="password2">
                </div>
                <div class="inputContainer">
                    <input type="text" placeholder="验证码" name="checkCode" v-model="checkCode">
                    <button class="getCheckBtn" style="top:9.7rem" @click.prevent="getCheck" v-show="!computedTime">获取验证码</button>
                    <button class="getCheckBtn"  style="top:9.7rem" v-show="computedTime">已发送({{computedTime}}s)</button>
                </div>
                <div class="tip">
                    温馨提示：{{tipmsg}}
                </div>
                <button class="btn" @click.prevent="setPassword">修改密码</button>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import { MessageBox } from 'mint-ui'
    import {Toast} from 'mint-ui'
    export default{
        data(){
            return{
                password1:"",
                password2:"",
                tipmsg:"密码至少8位，要求必须字母、数字加英文符号（不包含空格）",
                checkCode:null,//验证码
                computedTime:0,//倒数计时
            }
        },
        computed:{
            checkPassword:function(){
                // 密码至少8位，要求必须字母、数字加英文符号（不包含空格）
                return  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/gi.test(this.password1);
            }
        },
        methods:{
            async setPassword(){
                if(!this.checkPassword)
                    Toast({message: '密码格式不正确，请重新输入',position: 'bottom',duration: 3000});
                    // this.tipmsg='密码格式不正确，请重新输入';
                else if(this.checkPassword&&this.password1!=this.password2)
                    Toast({message: '密码不一致，请重新输入',position: 'bottom',duration: 3000});
                    // this.tipmsg='密码不一致，请重新输入';
                else if(this.checkPassword&&this.password1==this.password2){
                    // this.tipmsg='密码修改成功';
                    let portData=this.$qs.stringify({
                        'newpass':this.password1,
                        'checkCode':this.checkCode
                    });
                    let tokenStr=window.sessionStorage.getItem("tokenStr");
                    await this.postRequest('/users/setUsersPassword',portData,tokenStr).then(response=>{
                        if(response.code==200)
                            Toast({message: '密码修改成功',position: 'bottom',duration: 3000});
                        else Toast({message: '服务器出现问题',position: 'bottom',duration: 3000});
                    }).catch(error=>{
                        console.log('服务器抛出异常')
                    });
                }
            },
            async getCheck(){
                this.computedTime=30;
                this.timer=setInterval(()=>{
                    this.computedTime--;
                    if(this.computedTime==0){
                        clearInterval(this.timer);//清除计时器
                    }
                },1000);
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    @import '../style/login.scss';
</style>